<template>
  <div class="add-WebsiteAnalysis">
    <el-drawer v-model="drawerAddWebsiteAnalysis" size="30%" :before-close="close">
      <template #header>
        <div>
          <h3>网站解析</h3>
          <p class="text-xs text-[#999999] mt-1"
            >继续解析城名，网站才能被成功访间。<span class="text-[#3721FF]">如何解析域名？</span></p
          >
        </div>
      </template>
      <div class="">
        <div class="">
          <h4>1.网站域名解析</h4>
          <div class="bg-[#FAFAFA] p-4 mt-4">
            <div class="flex items-center mb-4">
              <span class="inline-block w-[60px]">主机记录</span>
              <div
                class="flex items-center justify-between bg-[#F5F5F5] ml-4 px-2 py-1 rounded-lg w-[84%] leading-[30px]"
              >
                <span>{{ dnsInstructions[0]?.hostRecord ?? '-' }}</span>
                <el-button
                  class="ml-2"
                  plain
                  color="#3721FF"
                  type="primary"
                  size="small"
                  v-copyText="dnsInstructions[0]?.hostRecord"
                  >复制</el-button
                >
              </div>
            </div>
            <div class="flex items-center">
              <span class="inline-block w-[60px]">记录值</span>
              <div
                class="flex items-center justify-between bg-[#F5F5F5] ml-4 px-2 py-1 rounded-lg w-[84%] leading-[30px]"
              >
                <span>{{ dnsInstructions[0]?.recordValue ?? '-' }}</span>
                <el-button
                  class="ml-2"
                  plain
                  color="#3721FF"
                  type="primary"
                  size="small"
                  v-copyText="dnsInstructions[0]?.recordValue"
                  >复制</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="mt-8">
          <h4>2.SSL证书校验：</h4>
          <div class="bg-[#FAFAFA] p-4 mt-4">
            <div class="flex items-center mb-4">
              <span class="inline-block w-[60px]">主机记录</span>
              <div
                class="flex items-center justify-between bg-[#F5F5F5] ml-4 px-2 py-1 rounded-lg w-[84%] leading-[30px]"
              >
                <span>{{ dnsInstructions[1]?.hostRecord ?? '-' }}</span>
                <el-button
                  class="ml-2"
                  plain
                  color="#3721FF"
                  type="primary"
                  size="small"
                  v-copyText="dnsInstructions[1]?.hostRecord"
                  >复制</el-button
                >
              </div>
            </div>
            <div class="flex items-center">
              <span class="inline-block w-[60px]">记录值</span>
              <div
                class="flex items-center justify-between bg-[#F5F5F5] ml-4 px-2 py-1 rounded-lg w-[84%] leading-[30px]"
              >
                <span>{{ dnsInstructions[1]?.recordValue ?? '-' }}</span>
                <el-button
                  class="ml-2"
                  plain
                  color="#3721FF"
                  type="primary"
                  size="small"
                  v-copyText="dnsInstructions[1]?.recordValue"
                  >复制</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer el-dia-btn">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" color="#3721FF" @click="handleDomainVerification"
            >验证分析</el-button
          >
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
const drawerAddWebsiteAnalysis = ref(true)
import { WebSiteApi, WebSiteVO } from '@/api/website/website'
// getDnsInstructions
const dnsInstructions = ref<WebSiteVO[]>([])
const formData = ref({
  title: '',
  content: ''
})
const rules = {
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  title: [{ required: true, message: '请输入网站名称', trigger: 'blur' }],
  content: [{ required: true, message: '请输入网站域名', trigger: 'blur' }]
}
const props = defineProps<{
  isWebsiteAnalysis: boolean
  selectedId: number | string
}>()
const emit = defineEmits(['close', 'refresh'])
const close = () => {
  emit('close')
}
// 验证分析
const handleDomainVerification = async () => {
  await WebSiteApi.getDomainVerification(props.selectedId as number).then((res) => {
    // if (res.code === 200) {
    // if(!res.verified){
    //   ElMessage({
    //       message:'网站域名解析验证失败',
    //       type:'error'
    //   })
    // }
    // if(!res.sslVerified){
    //   ElMessage({
    //     message:'SSL证书校验验证失败',
    //     type:'error'
    //   })
    // }
    // if(res.verified && res.sslVerified){
      ElMessage({
        message: res.errorMessage || '验证成功',
      })
    // }
    close()
    // 刷新父页面列表
    emit('refresh')
  })
}
// 获取解析数据
const handleGetDnsInstructions = async () => {
  await WebSiteApi.getDnsInstructions(props.selectedId as number).then((res) => {
    dnsInstructions.value = res.dnsRecords
  })
}
watch(
  () => props.isWebsiteAnalysis,
  (val) => {
    drawerAddWebsiteAnalysis.value = val
  }
)
watch(drawerAddWebsiteAnalysis, (val) => {
  if (!val) {
    emit('close')
  }
})
onMounted(() => {
  handleGetDnsInstructions()
})
</script>

<style scoped>
@import '@/styles/website.scss';
</style>
